<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js Mobile Gesture Example</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
    }
    .touch-point {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: red;
      pointer-events: none;
    }
  </style>
</head>
<body>
	<script src="./js/three.min.js"></script>
	<script src="./js/OrbitControls.js"></script>
	<script src="./js/GLTFLoader.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/eruda/1.2.6/eruda.min.js"></script>
  <script>
        eruda.init();

    // 创建场景
    const scene = new THREE.Scene();

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 添加灯光
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight.position.set(10, 10, 10);
    scene.add(directionalLight);

    // 加载 glTF 模型
    const loader = new THREE.GLTFLoader();
    loader.load('models/woman.glb', (gltf) => {
      const model = gltf.scene;
      scene.add(model);

      // 设置初始状态
      let touchStartRotation = 0;

      // 创建触摸点元素
      const touchPoint1 = document.createElement('div');
      touchPoint1.className = 'touch-point';
      const touchPoint2 = document.createElement('div');
      touchPoint2.className = 'touch-point';
      document.body.appendChild(touchPoint1);
      document.body.appendChild(touchPoint2);

      // 监听手势事件
      renderer.domElement.addEventListener('touchstart', (event) => {
        if (event.touches.length === 2) {
          // 记录双指初始触摸点的角度
          const touchX0 = event.touches[0].pageX;
          const touchY0 = event.touches[0].pageY;
          const touchX1 = event.touches[1].pageX;
          const touchY1 = event.touches[1].pageY;
          touchStartRotation = Math.atan2(touchY1 - touchY0, touchX1 - touchX0);

          // 更新触摸点位置
          touchPoint1.style.left = touchX0 + 'px';
          touchPoint1.style.top = touchY0 + 'px';
          touchPoint2.style.left = touchX1 + 'px';
          touchPoint2.style.top = touchY1 + 'px';
        }
      });

      renderer.domElement.addEventListener('touchmove', (event) => {
        event.preventDefault();

        if (event.touches.length === 2) {
          // 获取当前触摸点的角度
          const touchX0 = event.touches[0].pageX;
          const touchY0 = event.touches[0].pageY;
          const touchX1 = event.touches[1].pageX;
          const touchY1 = event.touches[1].pageY;
          const touchMoveRotation = Math.atan2(touchY1 - touchY0, touchX1 - touchX0);

          // 计算旋转角度差值
          const rotationDelta = touchMoveRotation - touchStartRotation;

          // 旋转模型
          model.rotation.z += rotationDelta;

          // 更新触摸点位置
          touchPoint1.style.left = touchX0 + 'px';
          touchPoint1.style.top = touchY0 + 'px';
          touchPoint2.style.left = touchX1 + 'px';
          touchPoint2.style.top = touchY1 + 'px';

          // 更新初始触摸点的角度
          touchStartRotation = touchMoveRotation;
        }
      });

      // 渲染循环
      function animate() {
        requestAnimationFrame(animate);

        // 渲染场景
        renderer.render(scene, camera);
      }
      animate();
    });
  </script>
</body>
</html>
